<template>
  <div class="commentparent">
    <div v-for="(item,index) in commentlist" :key="index">
    <div class="commentitem">
      <div class="userimg">
        <img v-if="item.userinfo && item.userinfo.user_img" :src="item.userinfo.user_img">
        <img src="@/assets/head.png" v-else>
      </div>
      <div class="commentcontent">
          <p>
            <span v-if="item.userinfo">{{item.userinfo.name}}</span>
            <span>{{item.comment_date}}</span>
          </p>
        <div>
          {{item.comment_content}}
          <span class="publish" @click="publishClick(item.comment_id)">回复</span>
        </div>
      </div>
    </div>
      <div style="padding: 0 30px">  <commentitem @PostPublish="publishClick" :commentchild="item.child"></commentitem> </div>
    </div>
  </div>
</template>

<script>
import Commentitem from "./commentitem";
export default {
  name: "comment",
  components: {Commentitem},
  data(){
    return{
      commentlist:null
    }
  },
  methods:{
    async commentData(){
      const res = await this.$http.get('/comment/'+this.$route.params.id)
      if(res.data){
        this.$emit('lengthselect',res.data.length)
      }
      this.commentlist = this.changeData(res.data)
    },
    changeData(arr){
      function fn(temp){
        let arr1 = []
        for (var i = 0;i<arr.length;i++){
          if(arr[i].parent_id == temp){
            arr1.push(arr[i])
            arr[i].child =  fn(arr[i].comment_id)
          }
        }
        return arr1
      }
      return fn(null);
    },
    publishClick(id){
     this.$emit('publishClick',id)
    }
  },
  created() {
    this.commentData()
  }
}
</script>

<style scoped lang="less">
.commentparent{
  >div{
    border-bottom: 0.28vw solid #666666;
  }
  padding: 2.78vw 1.39vw;
  .commentitem {
    padding: 2.78vw 1.39vw;
    display: flex;
    .userimg {
      margin-right: 2.78vw;
      img {
        width: 9.72vw;
        height: 9.72vw;
        border-radius: 50%;
      }
    }
    .commentcontent{
      flex: 1;
      p{
        display: flex;
        justify-content: space-between;
        font-size: 3.61vw;
        color: #666666;
        margin-bottom: 1.39vw;
      }
      div{
        position: relative;
        font-size: 3.61vw;
        .publish{
          color: #fb7299;
          position: absolute;
          right: 1.39vw;
        }
      }
    }
  }
}
</style>
